<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="行业分析" />
	<meta name="author" content="" />
	
	<title>行业分析</title>

	<!--<link rel="stylesheet" href="http://fonts.useso.com/css?family=Arimo:400,700,400italic">-->
	<link rel="stylesheet" href="assets/css/fonts/linecons/css/linecons.css">
	<link rel="stylesheet" href="assets/css/fonts/fontawesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="assets/css/bootstrap.css">
	<link rel="stylesheet" href="assets/css/xenon-core.css">
	<link rel="stylesheet" href="assets/css/xenon-forms.css">
	<link rel="stylesheet" href="assets/css/xenon-components.css">
	<link rel="stylesheet" href="assets/css/xenon-skins.css">
	<link rel="stylesheet" href="assets/css/custom.css">

	<script src="assets/js/jquery-1.11.1.min.js"></script>

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	
	<style>
	body {
	  font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
	  font-weight: normal;
	  line-height: 1.6;
	  color: #333333;
	  font-size: 1.6rem;
	}
	</style>
	
	
</head>
<body class="page-body">

	<div class="page-container"><!-- add class "sidebar-collapsed" to close sidebar by default, "chat-visible" to make chat appear always -->
			
		<!-- Add "fixed" class to make the sidebar fixed always to the browser viewport. -->
		<!-- Adding class "toggle-others" will keep only one menu item open at a time. -->
		<!-- Adding class "collapsed" collapse sidebar root elements and show only icons. -->
		
		<div class="main-content">
			
			<script>
				jQuery(document).ready(function($)
				{
					var gaugesPalette = ['#8dc63f', '#40bbea', '#ffba00', '#cc3f44'];
						
					// Data Sources for all charts
					var reqs_per_second_data = [
						{ time: new Date("October 02, 2014 01:00:00"), reqs: 89 },
						{ time: new Date("October 02, 2014 02:00:00"), reqs: 79 },
						{ time: new Date("October 02, 2014 03:00:00"), reqs: 115 },
						{ time: new Date("October 02, 2014 04:00:00"), reqs: 186 },
						{ time: new Date("October 02, 2014 05:00:00"), reqs: 110 },
						{ time: new Date("October 02, 2014 06:00:00"), reqs: 196 },
						{ time: new Date("October 02, 2014 07:00:00"), reqs: 128 },
						{ time: new Date("October 02, 2014 08:00:00"), reqs: 51 },
						{ time: new Date("October 02, 2014 09:00:00"), reqs: 70 },
						{ time: new Date("October 02, 2014 10:00:00"), reqs: 54 },
						{ time: new Date("October 02, 2014 11:00:00"), reqs: 2 },
						{ time: new Date("October 02, 2014 12:00:00"), reqs: 184 },
						{ time: new Date("October 02, 2014 13:00:00"), reqs: 48 },
						{ time: new Date("October 02, 2014 14:00:00"), reqs: 75 },
						{ time: new Date("October 02, 2014 15:00:00"), reqs: 200 },
						{ time: new Date("October 02, 2014 16:00:00"), reqs: 9 },
						{ time: new Date("October 02, 2014 17:00:00"), reqs: 37 },
						{ time: new Date("October 02, 2014 18:00:00"), reqs: 152 },
						{ time: new Date("October 02, 2014 19:00:00"), reqs: 78 },
						{ time: new Date("October 02, 2014 20:00:00"), reqs: 154 },
						{ time: new Date("October 02, 2014 21:00:00"), reqs: 184 },
						{ time: new Date("October 02, 2014 22:00:00"), reqs: 167 },
						{ time: new Date("October 02, 2014 23:00:00"), reqs: 12 },
						{ time: new Date("October 03, 2014 00:00:00"), reqs: 88 },
					];
					
					var cpu_usage_data = [
						{ time: new Date("October 02, 2014 01:00:00"), usage: 75 },
						{ time: new Date("October 02, 2014 02:00:00"), usage: 55 },
						{ time: new Date("October 02, 2014 03:00:00"), usage: 49 },
						{ time: new Date("October 02, 2014 04:00:00"), usage: 87 },
						{ time: new Date("October 02, 2014 05:00:00"), usage: 8 },
						{ time: new Date("October 02, 2014 06:00:00"), usage: 20 },
						{ time: new Date("October 02, 2014 07:00:00"), usage: 39 },
						{ time: new Date("October 02, 2014 08:00:00"), usage: 26 },
						{ time: new Date("October 02, 2014 09:00:00"), usage: 87 },
						{ time: new Date("October 02, 2014 10:00:00"), usage: 69 },
						{ time: new Date("October 02, 2014 11:00:00"), usage: 40 },
						{ time: new Date("October 02, 2014 12:00:00"), usage: 57 },
						{ time: new Date("October 02, 2014 13:00:00"), usage: 48 },
						{ time: new Date("October 02, 2014 14:00:00"), usage: 73 },
						{ time: new Date("October 02, 2014 15:00:00"), usage: 28 },
						{ time: new Date("October 02, 2014 16:00:00"), usage: 5 },
						{ time: new Date("October 02, 2014 17:00:00"), usage: 73 },
						{ time: new Date("October 02, 2014 18:00:00"), usage: 27 },
						{ time: new Date("October 02, 2014 19:00:00"), usage: 63 },
						{ time: new Date("October 02, 2014 20:00:00"), usage: 5 },
						{ time: new Date("October 02, 2014 21:00:00"), usage: 100 },
						{ time: new Date("October 02, 2014 22:00:00"), usage: 61 },
						{ time: new Date("October 02, 2014 23:00:00"), usage: 39 },
						{ time: new Date("October 03, 2014 00:00:00"), usage: 59 },
					];
					
					var memory_usage_data = [
						{ time: new Date("October 02, 2014 01:00:00"), used: 559 },
						{ time: new Date("October 02, 2014 02:00:00"), used: 692 },
						{ time: new Date("October 02, 2014 03:00:00"), used: 534 },
						{ time: new Date("October 02, 2014 04:00:00"), used: 607 },
						{ time: new Date("October 02, 2014 05:00:00"), used: 50 },
						{ time: new Date("October 02, 2014 06:00:00"), used: 772 },
						{ time: new Date("October 02, 2014 07:00:00"), used: 30 },
						{ time: new Date("October 02, 2014 08:00:00"), used: 108 },
						{ time: new Date("October 02, 2014 09:00:00"), used: 440 },
						{ time: new Date("October 02, 2014 10:00:00"), used: 371 },
						{ time: new Date("October 02, 2014 11:00:00"), used: 209 },
						{ time: new Date("October 02, 2014 12:00:00"), used: 378 },
						{ time: new Date("October 02, 2014 13:00:00"), used: 308 },
						{ time: new Date("October 02, 2014 14:00:00"), used: 585 },
						{ time: new Date("October 02, 2014 15:00:00"), used: 96 },
						{ time: new Date("October 02, 2014 16:00:00"), used: 473 },
						{ time: new Date("October 02, 2014 17:00:00"), used: 864 },
						{ time: new Date("October 02, 2014 18:00:00"), used: 895 },
						{ time: new Date("October 02, 2014 19:00:00"), used: 610 },
						{ time: new Date("October 02, 2014 20:00:00"), used: 893 },
						{ time: new Date("October 02, 2014 21:00:00"), used: 753 },
						{ time: new Date("October 02, 2014 22:00:00"), used: 209 },
						{ time: new Date("October 02, 2014 23:00:00"), used: 555 },
						{ time: new Date("October 03, 2014 00:00:00"), used: 144 },
					];
						
					// Requests per second gauge
					$('#reqs-per-second').dxCircularGauge({
						scale: {
							startValue: 0,
							endValue: 200,
							majorTick: {
								tickInterval: 50
							}
						},
						rangeContainer: {
							palette: 'pastel',
							width: 3,
							ranges: [
								{
									startValue: 0,
									endValue: 50,
									color: gaugesPalette[0]
								}, {
									startValue: 50,
									endValue: 100,
									color: gaugesPalette[1]
								}, {
									startValue: 100,
									endValue: 150,
									color: gaugesPalette[2]
								}, {
									startValue: 150,
									endValue: 200,
									color: gaugesPalette[3]
								}
							],
						},
						value: 44,
						valueIndicator: {
							offset: 10,
							color: '#2c2e2f',
							spindleSize: 12
						}
					});
					
					// Requests per second chart
					$("#reqs-per-second-chart").dxChart({
						dataSource: reqs_per_second_data,
						commonPaneSettings: {
							border: {
								visible: true,
								color: '#f5f5f5'
							}
						},
						commonSeriesSettings: {
							type: "area",
							argumentField: "time",
							border: {
								color: '#68b828',
								width: 1,
								visible: true
							}
						},
						series: [
							{ valueField: "reqs", name: "Reqs per Second", color: '#68b828', opacity: .5 },
						],
						commonAxisSettings: {
							label: {
								visible: true
							},
							grid: {
								visible: true,
								color: '#f5f5f5'
							}
						},
						argumentAxis: {
							valueMarginsEnabled: false,
							label: {
								customizeText: function (arg) {
									return date('h:i A', arg.value);
								}
							},
						},
						legend: {
							visible: false
						}
					});
					
					
						
					// CPU Usage
					$('#cpu-usage').dxCircularGauge({
						scale: {
							startValue: 0,
							endValue: 100,
							majorTick: {
								tickInterval: 25
							}
						},
						rangeContainer: {
							palette: 'pastel',
							width: 3,
							ranges: [
								{
									startValue: 0,
									endValue: 25,
									color: gaugesPalette[0]
								}, {
									startValue: 25,
									endValue: 50,
									color: gaugesPalette[1]
								}, {
									startValue: 50,
									endValue: 75,
									color: gaugesPalette[2]
								}, {
									startValue: 75,
									endValue: 100,
									color: gaugesPalette[3]
								}
							],
						},
						value: 16,
						valueIndicator: {
							offset: 10,
							color: '#2c2e2f',
							spindleSize: 12
						}
					});
					
					// CPU Usage chart
					$("#cpu-usage-chart").dxChart({
						dataSource: cpu_usage_data,
						commonPaneSettings: {
							border: {
								visible: true,
								color: '#f5f5f5'
							}
						},
						commonSeriesSettings: {
							type: "area",
							argumentField: "time",
							border: {
								color: '#7c38bc',
								width: 1,
								visible: true
							}
						},
						series: [
							{ valueField: "usage", name: "Capacity used", color: '#7c38bc', opacity: .5 },
						],
						commonAxisSettings: {
							label: {
								visible: true
							},
							grid: {
								visible: true,
								color: '#f5f5f5'
							}
						},
						argumentAxis: {
							valueMarginsEnabled: false,
							label: {
								customizeText: function (arg) {
									return date('h:i A', arg.value);
								}
							},
						},
						legend: {
							visible: false
						}
					});
					
					// Memory Usage
					$('#memory-usage').dxCircularGauge({
						scale: {
							startValue: 0,
							endValue: 1000,
							majorTick: {
								tickInterval: 250
							}
						},
						rangeContainer: {
							palette: 'pastel',
							width: 3,
							ranges: [
								{
									startValue: 0,
									endValue: 250,
									color: '#40bbea'
								}, {
									startValue: 250,
									endValue: 500,
									color: '#40bbea'
								}, {
									startValue: 500,
									endValue: 750,
									color: '#40bbea'
								}, {
									startValue: 750,
									endValue: 1000,
									color: '#40bbea'
								}
							],
						},
						value: 315,
						valueIndicator: {
							offset: 10,
							color: '#2c2e2f',
							spindleSize: 12
						}
					});
					
					// Memory Usage chart
					$("#memory-usage-chart").dxChart({
						dataSource: memory_usage_data,
						commonPaneSettings: {
							border: {
								visible: true,
								color: '#f5f5f5'
							}
						},
						commonSeriesSettings: {
							type: "area",
							argumentField: "time",
							border: {
								color: '#40bbea',
								width: 1,
								visible: true
							}
						},
						series: [
							{ valueField: "used", name: "Megabytes occupied", color: '#40bbea', opacity: .5 },
						],
						commonAxisSettings: {
							label: {
								visible: true
							},
							grid: {
								visible: true,
								color: '#f5f5f5'
							}
						},
						argumentAxis: {
							valueMarginsEnabled: false,
							label: {
								customizeText: function (arg) {
									return date('h:i A', arg.value);
								}
							},
						},
						legend: {
							visible: false
						}
					});
					
					
					// Combine charts for filtering, grouped by time
					var all_data_sources = [];
					
					$.map(reqs_per_second_data, function(arg, i)
					{
						all_data_sources.push({
							time: 					arg.time,
							requestsPerMinute: 		reqs_per_second_data[i].reqs,
							cpuUsage: 				cpu_usage_data[i].usage,
							memoryUsed: 			memory_usage_data[i].used
						});
					});
					
					
					// Range Filter
					$("#range-chart").dxRangeSelector({
						dataSource: all_data_sources,
						size: {
							height: 140
						},
						chart: {
							series: [
								{ argumentField: "time", valueField: "requestsPerMinute", color: '#68b828', opacity: .65 },
								{ argumentField: "time", valueField: "cpuUsage", color: '#7c38bc', opacity: .65 },
								{ argumentField: "time", valueField: "memoryUsed", color: '#40bbea', opacity: .65 }
							]
						},
						
						selectedRangeChanged: function(e)
						{
							var filter = {
								reqsPerMinuteData: [],
								cpuUsageData: [],
								memoryUsageData: []
							};
							
							$.map(all_data_sources, function(arg, i)
							{
								if(date("U", e.startValue) <= date("U", arg.time) && date("U", e.endValue) >= date("U", arg.time))
								{
									filter.reqsPerMinuteData.push({
										time: arg.time,
										reqs: arg.requestsPerMinute
									});
									
									filter.cpuUsageData.push({
										time: arg.time,
										usage: arg.cpuUsage
									});
									
									filter.memoryUsageData.push({
										time: arg.time,
										used: arg.memoryUsed
									});
								}
							});
							
							$('#reqs-per-second-chart').dxChart('instance').option('dataSource', filter.reqsPerMinuteData);
							$('#cpu-usage-chart').dxChart('instance').option('dataSource', filter.cpuUsageData);
							$('#memory-usage-chart').dxChart('instance').option('dataSource', filter.memoryUsageData);
						}
					});
					
					
					
					// Resize charts
					$(window).on('xenon.resize', function()
					{
						$("#range-chart").data("dxRangeSelector").render();
						
						$("#reqs-per-second-chart").data("dxChart").render();
						$("#cpu-usage-chart").data("dxChart").render();
						$("#memory-usage-chart").data("dxChart").render();
						
						$("#reqs-per-second").data("dxCircularGauge").render();
						$("#cpu-usage").data("dxCircularGauge").render();
						$("#memory-usage").data("dxCircularGauge").render();
					});
				});
			</script>
			
			<div class="panel panel-default">
				<div class="panel-heading">
					实时风险指数
				</div>
				<div class="panel-body">
					
					<div class="row">
						<div class="col-sm-12">
							<div id="range-chart"></div>
						</div>
					</div>
					
				</div>
			</div>
			
			<div class="panel panel-default">
				<div class="panel-heading">
					化工行业风险指数
				</div>
				<div class="panel-body">
					
					<div class="row">
						<div class="col-sm-3">
							<p class="text-medium">选取工艺设备、物料安全、制度台账等能够反映化工企业安全生产预警要求的安全要素，采用数学方法建立各种指数模型，描述企业的宏观安全运行状况。</p>
							<div class="super-large text-secondary" data-count="this" data-from="0" data-to="44" data-duration="1.5">0</div>
						</div>
						<div class="col-sm-3">
							<div id="reqs-per-second" style="height: 150px;"></div>
						</div>
						<div class="col-sm-6">
							<div id="reqs-per-second-chart" style="height: 150px;"></div>
						</div>
					</div>
					
				</div>
			</div>
			
			<div class="panel panel-default">
				<div class="panel-heading">
					非煤矿山风险指数
				</div>
				<div class="panel-body">
					
					<div class="row">
						<div class="col-sm-3">
							<p class="text-medium">围绕非煤矿山环境危害性、周边环境敏感性、控制机制可靠性三方面建立指标体系，通过风险预判给出综合评分。</p>
							<div class="super-large text-purple" data-count="this" data-from="0" data-to="16" data-duration="2">0</div>
						</div>
						<div class="col-sm-3">
							<div id="cpu-usage" style="height: 150px;"></div>
						</div>
						<div class="col-sm-6">
							<div id="cpu-usage-chart" style="height: 150px;"></div>
						</div>
					</div>
					
				</div>
			</div>
			
			<div class="panel panel-default">
				<div class="panel-heading">
					工贸行业风险指数
				</div>
				<div class="panel-body">
					
					<div class="row">
						<div class="col-sm-3">
							<p class="text-medium">通过隐患排查、风险管理及仪器仪表监控等安全方法及工具，全面辨识反映企业安全生产现状的关键要素，定量化表示企业生产安全状态。</p>
							<div class="super-large text-info" data-count="this" data-from="0" data-to="315" data-duration="3">0</div>
						</div>
						<div class="col-sm-3">
							<div id="memory-usage" style="height: 150px;"></div>
						</div>
						<div class="col-sm-6">
							<div id="memory-usage-chart" style="height: 150px;"></div>
						</div>
					</div>
					
				</div>
			</div>
			<!-- Main Footer -->
			<!-- Choose between footer styles: "footer-type-1" or "footer-type-2" -->
			<!-- Add class "sticky" to  always stick the footer to the end of page (if page contents is small) -->
			<!-- Or class "fixed" to  always fix the footer to the end of page -->
			<footer class="main-footer sticky footer-type-1">
				<div class="footer-inner">
					<!-- Add your copyright text here -->
					
					<!-- Go to Top Link, just add rel="go-top" to any link to add this functionality -->
					<div class="go-up">
						<a href="#" rel="go-top">
							<i class="fa-angle-up"></i>
						</a>
					</div>
				</div>
			</footer>
		</div>
		
			
		<!-- start: Chat Section -->
		<div id="chat" class="fixed">
			
			<div class="chat-inner">
			
				
				<h2 class="chat-header">
					<a href="#" class="chat-close" data-toggle="chat">
						<i class="fa-plus-circle rotate-45deg"></i>
					</a>
					
					Chat
					<span class="badge badge-success is-hidden">0</span>
				</h2>
				
				<script type="text/javascript">
				// Here is just a sample how to open chat conversation box
				jQuery(document).ready(function($)
				{
					var $chat_conversation = $(".chat-conversation");
					
					$(".chat-group a").on('click', function(ev)
					{
						ev.preventDefault();
						
						$chat_conversation.toggleClass('is-open');
						
						$(".chat-conversation textarea").trigger('autosize.resize').focus();
					});
					
					$(".conversation-close").on('click', function(ev)
					{
						ev.preventDefault();
						$chat_conversation.removeClass('is-open');
					});
				});
				</script>
				
				
				<div class="chat-group">
					<strong>Favorites</strong>
					
					<a href="#"><span class="user-status is-online"></span> <em>Catherine J. Watkins</em></a>
					<a href="#"><span class="user-status is-online"></span> <em>Nicholas R. Walker</em></a>
					<a href="#"><span class="user-status is-busy"></span> <em>Susan J. Best</em></a>
					<a href="#"><span class="user-status is-idle"></span> <em>Fernando G. Olson</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Brandon S. Young</em></a>
				</div>
				
				
				<div class="chat-group">
					<strong>Work</strong>
					
					<a href="#"><span class="user-status is-busy"></span> <em>Rodrigo E. Lozano</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Robert J. Garcia</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Daniel A. Pena</em></a>
				</div>
				
				
				<div class="chat-group">
					<strong>Other</strong>
					
					<a href="#"><span class="user-status is-online"></span> <em>Dennis E. Johnson</em></a>
					<a href="#"><span class="user-status is-online"></span> <em>Stuart A. Shire</em></a>
					<a href="#"><span class="user-status is-online"></span> <em>Janet I. Matas</em></a>
					<a href="#"><span class="user-status is-online"></span> <em>Mindy A. Smith</em></a>
					<a href="#"><span class="user-status is-busy"></span> <em>Herman S. Foltz</em></a>
					<a href="#"><span class="user-status is-busy"></span> <em>Gregory E. Robie</em></a>
					<a href="#"><span class="user-status is-busy"></span> <em>Nellie T. Foreman</em></a>
					<a href="#"><span class="user-status is-busy"></span> <em>William R. Miller</em></a>
					<a href="#"><span class="user-status is-idle"></span> <em>Vivian J. Hall</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Melinda A. Anderson</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Gary M. Mooneyham</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Robert C. Medina</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Dylan C. Bernal</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Marc P. Sanborn</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Kenneth M. Rochester</em></a>
					<a href="#"><span class="user-status is-offline"></span> <em>Rachael D. Carpenter</em></a>
				</div>
			
			</div>
			
			<!-- conversation template -->
			<div class="chat-conversation">
				
				<div class="conversation-header">
					<a href="#" class="conversation-close">
						&times;
					</a>
					
					<span class="user-status is-online"></span>
					<span class="display-name">Arlind Nushi</span> 
					<small>Online</small>
				</div>
				
				<ul class="conversation-body">	
					<li>
						<span class="user">Arlind Nushi</span>
						<span class="time">09:00</span>
						<p>Are you here?</p>
					</li>
					<li class="odd">
						<span class="user">Brandon S. Young</span>
						<span class="time">09:25</span>
						<p>This message is pre-queued.</p>
					</li>
					<li>
						<span class="user">Brandon S. Young</span>
						<span class="time">09:26</span>
						<p>Whohoo!</p>
					</li>
					<li class="odd">
						<span class="user">Arlind Nushi</span>
						<span class="time">09:27</span>
						<p>Do you like it?</p>
					</li>
				</ul>
				
				<div class="chat-textarea">
					<textarea class="form-control autogrow" placeholder="Type your message"></textarea>
				</div>
				
			</div>
			
		</div>
		<!-- end: Chat Section -->
		
		
	</div>
	
	
	<div class="page-loading-overlay">
		<div class="loader-2"></div>
	</div>
	



	<!-- Bottom Scripts -->
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/TweenMax.min.js"></script>
	<script src="assets/js/resizeable.js"></script>
	<script src="assets/js/joinable.js"></script>
	<script src="assets/js/xenon-api.js"></script>
	<script src="assets/js/xenon-toggles.js"></script>


	<!-- Imported scripts on this page -->
	<script src="assets/js/xenon-widgets.js"></script>
	<script src="assets/js/devexpress-web-14.1/js/knockout-3.1.0.js"></script>
	<script src="assets/js/devexpress-web-14.1/js/globalize.min.js"></script>
	<script src="assets/js/devexpress-web-14.1/js/dx.chartjs.js"></script>


	<!-- JavaScripts initializations and stuff -->
	<script src="assets/js/xenon-custom.js"></script>

</body>
</html>